<template>
<!-- // 图片导航 -->
<div class="imgNavBox" :style='`padding-top:${options.paddingTop/2}px;padding-bottom:${options.paddingBottom/2}px;`'>
    <div class="imgnav" >
        <ul> 
            <!-- - 9.25px -->
            <li v-for='(item,index) in options.imgList'  :key='index' :style="`width:calc(${100/options.imgList.length}% - ${options.spaceSize/4 ||0 }px);height:calc(100%  -  ${options.spaceSize/4|| 0 }px)`" :class="`flex${ options.imgList.length}`">
                <img :src='item.imageUrl' alt='' :style="`${!item.imageUrl ? `background:url(${defaultImg}) center center no-repeat;background-color:#FFE3D5;`:''}`" :class="[{'overHight':item.overHight===true},{'overWidth':item.overHight===false}]">
            </li>
        </ul>
        <img class="bgImg" v-if='options.bgUrl' :src="options.bgUrl" alt="">
    </div>
</div>
</template>
<script>
export default {
    data(){
        return{
            options:{
                imgList:[{},{},{},{}]
            },
            defaultImg:require('@/assets/img/editContent/pic-nor-small.png')
        }
    },
    props:{
        option:{
            type:Object
        }
    },
    methods:{
    },
    watch:{
        option:function(val){
            this.options =JSON.parse(JSON.stringify(val))||{};
        }
    },
    mounted(){
        this.options =JSON.parse(JSON.stringify(this.option))||{};
    }
}
</script>
<style lang="less" scoped>
    .imgNavBox{
        width:100%;
        height:auto;
        position:relative;
    }
    .imgnav{
        width:100%;
        height:100px;
        position:relative;
        // background:#ffffff;
        overflow: hidden;
        .bgImg{
            position:absolute;
            top:0;
            left:0;
            z-index: 1;
            width:100%;
        }
        ul{
            width:100%;
            height:100%;
            padding:7px 15.5px; 
            box-sizing: border-box;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position:relative;
            z-index: 2;
            li{
                // height:100%;
                position:relative;
                display:flex;
                justify-content: center;
                align-items: center;
                // overflow: hidden;
                img{
                    width:100%;
                    height:100%;
                    display:inline-block;
                    // background:url('~@/assets/img/editContent/pic-nor-small.png') center center no-repeat;
                    // background-color:#FFE3D5;
                    // background-size:cover;
                }
                .overHight{
                    width:100%;
                    height:auto;
                }
                .overWidth{
                    width:auto;
                    height:100%;
                }
            }
            // .flex4{
            //     width:22.5%;
            // }
            // .flex3{
            //     width:92/3%;
            // }
            .flex2{
               .overHight{
                    width:auto;
                    height:100%;
               }
            }
        }
    }
</style>